<div class="register">
  <div class="title">
    <div>注册会员</div>
  </div>
  <div class="registerMessage">
    <form dForm ngForm [dValidateRules]="formRules.rule" [layout]="layoutDirection" (dSubmit)="submitForm($event)">
      <div [ngModelGroup]="'registerForm'">
        <d-form-item>
          <d-form-label [required]="true">用户名</d-form-label>
          <d-form-control>
            <input dTextInput autocomplete="off" name="username" minlength="3" maxlength="32" placeholder="请输入用户名"
              [(ngModel)]="formData.userName" [dValidateRules]="formRules.usernameRules"
              [ngModelOptions]="{ updateOn: 'blur' }" />
          </d-form-control>
        </d-form-item>
        <d-form-item class="password">
          <d-form-label [required]="true">登录密码</d-form-label>
          <d-form-control [suffixTemplate]="suffixTemplate">
            <input dTextInput minlength="8" maxlength="32" [type]="showPassword ? 'text' : 'password'" name="password"
              [(ngModel)]="formData.password" placeholder="请输入密码（8-32个数字字母特殊字符组合）"
              [dValidateRules]="formRules.passwordRules" [ngModelOptions]="{ updateOn: 'blur' }" />
          </d-form-control>
          <ng-template #suffixTemplate>
            <i [class]="
                showPassword
                  ? 'icon icon-preview'
                  : 'icon icon-preview-forbidden'
              " (click)="showPassword = !showPassword"></i>
          </ng-template>
        </d-form-item>
        <d-form-item class="phonePrefix">
          <d-form-label>手机号</d-form-label>
          <d-form-control [suffixTemplate]="suffixTemplate1">
            <input class="phoneNum" dTextInput autocomplete="off" name="telephoneNumber" placeholder="请输入手机号"
              [(ngModel)]="formData.telephoneNumber" [dValidateRules]="formRules.phoneNumRules"
              [ngModelOptions]="{ updateOn: 'change' }" #phoneNumValid="ngModel" />
          </d-form-control>
          <ng-template #suffixTemplate1>
            <d-select class="prefix" [overview]="'underlined'" [placeholder]="'+86'" [options]="options"></d-select>
          </ng-template>
        </d-form-item>
        <d-form-item class="phoneCode">
          <d-form-label>手机验证码</d-form-label>
          <d-form-control>
            <input class="code" dTextInput autocomplete="off" name="verificationCode" placeholder="请输入接收的手机验证码"
              [(ngModel)]="formData.verificationCode" [dValidateRules]="formRules.codeRules"
              [ngModelOptions]="{ updateOn: 'blur' }" maxlength="6" />
            <d-button class="getCode" circled="true"
              [disabled]="!formData.telephoneNumber || !phoneNumValid.valid || countDown" (btnClick)="getCode()"><span
                *ngIf=!countDown>发送验证码</span>
              <app-countdown *ngIf=countDown [enddate]="starttime" type="getCode" (callGetList)="callGetList()">
              </app-countdown>
            </d-button>
          </d-form-control>
        </d-form-item>
        <d-form-item>
          <d-form-label [required]="true">验证码</d-form-label>
          <d-form-control>
            <input class="authentiCode" dTextInput type="text" name="authentiCode" maxlength="4"
              [(ngModel)]="formData.authentiCode" placeholder="请输入验证码" [dValidateRules]="formRules.authentiCodeRules" />
            <img class="codeImg" [src]="codeImg" (click)="reFreshCodeImg()" />
          </d-form-control>
        </d-form-item>
      </div>
      <d-form-operation>
        <button class="submit" dFormSubmit>提交验证</button>
      </d-form-operation>
    </form>
  </div>
</div>
